$(function() {
	//收集参数
	jQuery.each(document.getElementsByName('queryCondition'),function(i,n){
		var key = n.attributes.getNamedItem('v-model').value;
		var value= n.attributes.getNamedItem('data-default').value;
		data[key]=value;
	})
	data['gridData']='';
	var pageParam = {};
    pageParam['current']=1;
	pageParam['jump']=1;
	pageParam['count']=0;
	// bootstrap the demo
	demo = new Vue({
		el: '#demo',
		data: data
		,filters:{
			capitalize : function (str) {
				return data['th'][str].split('_')[0];
			}
		},methods:{
			collectionParams : function(){
				var collParam = {};
				var res = data;
				for(da in res){
					if(da!='gridColumns' && da!='gridData'  && da!='th'){
						if(da.indexOf('_ignore')==-1){
							collParam[da]=res[da]
						}
					}
				}
				collParam['curPage']=pageParam.current;
				return collParam;
			},getEditHref : function(url,value){
				if(value){
					url= url+"?id="+value;
				}
				return formatGetUrl(url,this.collectionParams())
			},getAudioHref : function(url,start_ms){
                if(start_ms!=0){
                    url= url+"#t="+(start_ms/1000);
                }
                return url;
            },search :function(){
				this.showPages(1);
			},showPages : function(index){
				var param = this.collectionParams();
				param['curPage']=index;
                pageParam.current=index;
				var result = getList(runUrl,param);
				this.gridData = result.list;
				pageParam.allpage=result.pageCount;
				pageParam.showItem=5;
				pageParam.count = result.count;
				this.cancleChekAll();
             },showHtml:function(value,type){
				if(type=='video'){
					return "<video src='"+value+"' controls='controls' width='200' height='200'>您的浏览器不支持 video 标签。</video>"
				}else if(type=='vioce'){
					return "<audio src='"+value+"' controls='controls' >wav</audio>"
				}else if(type=='img'){
					if(value == ''){
						return value;
					}else{
                        return "<img src='"+value+"'  width='200' height='200'>"
                    }
				}else if(type=='a'){
					return "<a href='"+value+"' target='_blank'>"+value+"</a>"
				}else if(type=='click_point'){//给提示
					return '<div href="javascript:;"  data-trigger="hover" tabindex="0" role="button" data-toggle="popover" title="" data-placement="right" data-content="点击可修改文案">'+value+'</div>';
				}else{
					return value;
				}
			},checkAll : function(){
				var allChecked = $('#checkAll').prop('checked')
				$(':checkbox[name^="selectChecked"]').prop('checked', allChecked);
			},cancleChekAll:function(){
				$('#checkAll').prop('checked',false)
				$(':checkbox[name^="selectChecked"]').prop('checked', false);
			}, thWidth : function(key){
				return data['th'][key].split('_')[1]
			},changeToInput : function(id,column,value,event,hrefUrl,dealUrl){
				var t = this;
				var el = event;
				var htmlStr = '<input type="text" class="form-control" value="'+value+'" id="changeId">';
				el.srcElement.innerHTML=htmlStr
				$('#changeId').focus();
				$('#changeId').on('blur',function(){
					$('#changeId').off('blur');
					window.location.href=formatGetUrl(hrefUrl,t.collectionParams());
				});
				$('#changeId').on('change',function(){
					if($('#changeId').val()==''){
						alert('请填写内容!!!');
						return;
					}
					if(confirm("是否执行该操作!")){
						var param={};
						param['id']=id;
						param['key']=column;
						param['value']=$('#changeId').val();
						var res = executeAjaxByPost(dealUrl,param);
						if(res.status==1){
							$('#changeId').off('change');
							window.location.href=formatGetUrl(hrefUrl,t.collectionParams());
						}else{
							alert(res.msg);
							window.location.href=formatGetUrl(hrefUrl,t.collectionParams());
						}
					}
				});
			}, del : function (delUrl,id) {
                if(confirm('是否删除')){
                    var flag = executeAjaxByGet(delUrl+'?id='+id,'');
                    if(flag == 1){
                        alert('删除成功!');
                        this.search();
                    }else{
                        alert('删除失败!');
                        return;
                    }
                }
            }, changeOneColumn : function (changeUrl,id,key,value) {
                if(confirm('是否修改')){
                    var flag = executeAjaxByPost(changeUrl+'?id='+id+'&'+key+'='+value,'');
                    if(flag == 1){
                        alert('修改成功!');
                        this.search();
                    }else{
                        alert('修改失败!');
                        return;
                    }
                }
            }
		}, mounted:function(){
            parseParam(data);
            var curPage = getQueryString("curPage");
            if(curPage==null){
                curPage=1;
            }
            this.showPages(curPage);
        },updated:function(){
			$('[data-toggle="popover"]').popover();
		}
	})

	pageInfo = Vue.component("page",{
			template:"#page",
			data:function(){
				return pageParam;
			},
			computed:{
				pages:function(){
					var pag = [];
					if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
						//总页数和要显示的条数那个大就显示多少条
						var i = Math.min(this.showItem,this.allpage);
						while(i){
							pag.unshift(i--);
						}
					}else{ //当前页数大于显示页数了
						var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
							i = this.showItem;
						if( middle >  (this.allpage - this.showItem)  ){
							middle = (this.allpage - this.showItem) + 1
						}
						while(i--){
							pag.push( middle++ );
						}
					}
					return pag
				}
			},
			methods:{
				goto:function(index){
					this.current = index;
					demo.showPages(this.current);
					//这里可以发送ajax请求
				},jumpTo:function(){
					this.current=this.jump;
					demo.showPages(this.jump);
				}
			}
		})

		vm = new Vue({
			el:'#app',
			components:{
				'pageInfo':pageInfo
			}
		})
});

function formatGetUrl(url,param){
	var i = 0;
	for(var key in param){
		if(i==0){
			url = url+"?"+ key+"="+this.param[key]
		}else{
			url = url+"&"+ key+"="+this.param[key]
		}
		i++;
	}
	console.log("url==>"+url);
	return url;
}

function getList(url,param){
	var res = []
	jQuery.ajax({
		url: formatGetUrl(url,param),
		type: "get",
		async: false,
		dataType: "json",
		success: function (data,code) {
			res=data;
		},
		error: function (XMLHttpRequest, textStatus, errorThrown, XMLHttpResponse) {
			console.log(XMLHttpRequest)
			var readyState=XMLHttpRequest.readyState;
            if(readyState==4){
                var text = XMLHttpRequest.responseText;
                if(text.indexOf("<html")>-1){
                    window.location.reload();
                }
			}else{
                alert("获取数据失败！");
			}
		}
	});
	return res;
}

function getTypeValue(name){
	var val=0;
	jQuery.each($("input[name='"+name+"']"),function(i,n){
		if(n.checked) {
			val=$(this).attr("value");
		}
	});
	return val;
}
